<template>
  <div class="selectListItemContainer" :style="getSelectListItemStyle">
    <div class="selectListItemContentContainer">
      <div class="titleContainer">
        <div class="title">{{ this.title }}</div>
        <div class="subtitle" v-show="this.itemType === 1">
          {{ this.subtitle }}
        </div>
      </div>
      <img class="img" :src="getSelectImg" />
    </div>
    <div class="divider" v-show="this.showDividerLine"></div>
  </div>
</template>
<script>
import { screenSize } from "../../../../assets/js/flexible.js";
export default {
  props: {
    titlePro: {
      type: String,
      default: "",
    },
    subtitlePro: {
      type: String,
      default: "",
    },
    isSelectedPro: {
      type: Boolean,
      default: false,
    },
    darkModePro: {
      type: String,
      default: "light",
    },
    showDividerLinePro: {
      type: Boolean,
      default: false,
    },
    itemIndexPro: {
      type: Number,
      default: 0,
    },
    selectedIndexPro: {
      type: Number,
      default: 0,
    },
    itemTypePro: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      title: "",
      subtitle: "",
      isSelected: false,
      darkMode: "light",
      showDividerLine: false,
      itemIndex: 0,
      selectedIndex: 0,
      itemType: 0, //类型：0-单行文本 1-双行文本
    };
  },
  mounted() {
    this.darkMode = this.darkModePro;
    this.isSelected = this.isSelectedPro;
    this.title = this.titlePro;
    this.showDividerLine = this.showDividerLinePro;
    this.itemIndex = this.itemIndexPro;
    this.selectedIndex = this.selectedIndexPro;
    this.subtitle = this.subtitlePro;
    this.itemType = this.itemTypePro;
  },
  watch: {
    showDividerLinePro(newVal) {
      this.showDividerLine = newVal;
    },
    titlePro(newVal) {
      this.title = newVal;
    },
    subtitlePro(newVal) {
      this.subtitle = newVal;
    },
    darkModePro(newVal) {
      this.darkMode = newVal;
    },
    isSelectedPro(newVal) {
      this.isSelected = newVal;
      // console.log("DialogSelectItemView: this.isSelected = ", this.isSelected);
    },
    itemIndexPro(newVal) {
      this.itemIndex = newVal;
    },
    selectedIndexPro(newVal) {
      this.selectedIndex = newVal;
    },
    itemTypePro(newVal) {
      this.itemType = newVal;
    },
  },
  computed: {
    getSelectListItemStyle() {
      var itemHeight = this.itemType === 0 ? screenSize(48) : screenSize(64);
      // console.log(
      //   "getSelectListItemStyle() itemHeight = " +
      //     (this.itemType === 0 ? 48 : 64)
      // );
      return { height: itemHeight + "px" };
    },
    getSelectImg() {
      if (this.itemIndex === this.selectedIndex) {
        return this.darkMode === "light"
          ? require("../../../../assets/img/light/ic_select_dot_on_light.png")
          : require("../../../../assets/img/dark/ic_select_dot_on_dark.png");
      } else {
        return this.darkMode === "light"
          ? require("../../../../assets/img/light/ic_select_dot_off_light.png")
          : require("../../../../assets/img/dark/ic_select_dot_off_dark.png");
      }
    },
  },
};
</script>
<style scoped>
.selectListItemContainer {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.selectListItemContainer .selectListItemContentContainer {
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.selectListItemContainer .selectListItemContentContainer .titleContainer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  /* background: #f00; */
}
.selectListItemContainer
  .selectListItemContentContainer
  .titleContainer
  .title {
  font-size: 16px;
  color: var(--current-primary-color);
}
.selectListItemContainer
  .selectListItemContentContainer
  .titleContainer
  .subtitle {
  font-size: 14px;
  color: var(--current-second-title-color);
  margin-top: 2px;
}
.selectListItemContainer .selectListItemContentContainer .img {
  width: 24px;
  height: 24px;
  /* background: #0f0; */
}
.selectListItemContainer .divider {
  width: 100%;
  height: 0.25px;
  background: var(--current-divider-line-color);
}
</style>
